<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <head th:include="staff/template :: header">
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    </head>

    <body class="main-body">
        <div class="container main-container">
            <div th:substituteby="staff/template :: nav" />               
            <div id="fields">
                <div  id="profs"> 
                    <div class="main-container">
                        <form id="input_form" class="input-append form-horizontal center" th:action="@{/staff/management/news/cover/save}" method="post">
                            <legend>Thêm cover bằng URL hình ảnh</legend>
                            <div class="form-group" th:each="cover : ${covers}" th:id="${'field'} + ${cover.id}">
                                <input th:value="${cover.link}" autocomplete="off" class="input pull-left form-control margin-top-down" th:id="${'field'}+${cover.id}" th:name="${'field'}+${cover.id}" type="text"  data-items="8"/>
                                <a th:id="${'remove'}+${cover.id}" class=" btn btn-danger old-remove-me margin-top-down" type="button">-</a>
                            </div>
                            <div id="field" class="form-group">
                                <!--<div class="col-md-6">-->
                                <!--</div>-->
                                <a id="b1" class="pull-left btn btn-success add-more margin-top-down clearfix" type="button">+</a>
                                <input type="submit" class="col-md-1 form-control btn-success btn-sm margin-top-down "/>
                            </div>
                            <input id="count" type="hidden" name="count" value="1" />
                        </form>
                        <!--<input type="hidden" id="count" th:value="${count}"/>-->
                    </div>
                    <br/>
                </div>
            </div>
            <div th:include="staff/template :: footer"></div>
        </div>	

        <script th:inline="javascript">
            /*<![CDATA[*/
//            var url = /*[[@{/staff/management/news/catalog/add}]]*/ "url";
                    var next = [[${count}]];
            jQuery(document).ready(function() {
                jQuery(".form-horizontal").validationEngine();
                COMMON.activeMenu("nav_website");
               $("#b1").on('click',function(e) {
                    var addto = "#field";
                    console.log(addto);
                    var addRemove = "#field";
                    next = next + 1;
                    var newIn = '<input autocomplete="off" class="margin-top-down input pull-left form-control" id="field ' + next + '" name="field' + next + '" type="text"/>';
                    var newInput = $(newIn);
                    var removeBtn = '<div id="field' + next + '" class="form-group">' + newIn + '<a id="remove' + (next) + '" class="margin-top-down btn btn-danger remove-me" >-</a></div>';
                    var removeButton = $(removeBtn);
                    $(addRemove).before(removeButton);
                    $("#field" + next).attr('data-source', $(addto).attr('data-source'));
                    $("#count").val(next);
                       $('#remove'+next).on('click', function(e) {
                        var fieldNum = this.id.charAt(this.id.length - 1);
                        next = next - 1;
                         $("#count").val(next);
                        console.log('xóa' + fieldNum);
                        var fieldID = "#field" + fieldNum;
                        $(this).remove();
                        $(fieldID).remove();
                        console.log('còn' + next);
                    });
                });
                $('.old-remove-me').on('click', function(e) {
                        var fieldNum = this.id.charAt(this.id.length - 1);
                        next = next - 1;
                         $("#count").val(next);
                        console.log('xóa' + fieldNum);
                        var fieldID = "#field" + fieldNum;
                        $(this).remove();
                        $(fieldID).remove();
                        console.log('còn' + next);
                    });
            });
             
            /*]]>*/
        </script>    
    </body>
</html>